<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户新增</title>
	<script src="/static/js3/jQuery-2.1.4/jquery-2.1.4.min.js"></script>
	<script>
		function delRow(trId) {
			$('#'+trId).remove();
        }
        var count=2;
		$(function () {
			$('#btn_removeAll').click(function () {
				$('#userTbody').empty();
            });
			$('#btn_submit').click(function () {
				var username = $('#username').val();
				var email = $('#email').val();
				var tel = $('#tel').val();

				var str=`<tr id="tr${count}">
				<td>${username}</td>
				<td>${email}</td>
				<td>${tel}</td>
				<td><a href="javascript:delRow('tr${count}')">删除</a></td>
			</tr>`
				$('#userTbody').append(str);
				count++;
            })
        })
	</script>
</head>
<body>
	<form name="userForm">
		<center>
			用户录入<br/>
			用户名:<input id="username" name="username" type="text" size=15/>
			E-mail:<input  id="email" name="email" type="text"  size=15/>
			电话:<input id="tel" name="tel" type="text" size=15/>
			<input type="button" value="添加" id="btn_submit"/>
			<input type="button" value="删除所有" id="btn_removeAll"/>
		</center>
	</form>
	<hr/>
	<table border="1" align="center" cellpadding=0 cellspacing=0 width=400>
		<thead>
			<tr>
				<th>用户名</th>
				<th>E-mail</th>
				<th>电话</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="userTbody">
			<tr id="tr1">
				<td>张无忌</td>
				<td>wujizhang@163.com</td>
				<td>18212345678</td>
				<td><a href="javascript:delRow('tr1')">删除</a></td>
			</tr>
		</tbody>
	</table>


</body>
</html>